<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>测试网页专用</title>
    <!-- 语义化设计系统 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.5.0/semantic.min.css" rel="stylesheet">
    <style>
        /* 添加作者标签样式 */
        .author-corner {
            position: absolute;
            top: 16px;
            right: 16px;
            font-size: 0.85em;
            min-width: 150px;
            /* 保证最小宽度 */
            color: rgba(180, 185, 255, 0.9);
            background: rgba(45, 36, 92, 0.6);
            padding: 8px 12px;
            border-radius: 14px;
            border: 1px solid rgba(163, 158, 255, 0.15);
            backdrop-filter: blur(4px);
            z-index: 1;
            text-align: center;
            /* 居中显示 */
            white-space: nowrap;
            /* 防止文字换行 */
        }






        /* ========== 置顶黑条样式 ========== */
        .top-banner {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: #08221b;
            color: #e8e8e8 !important;
            padding: 20px 20px;
            text-align: left;
            font-size: 2.5rem;
            font-family: 'Arial Black', sans-serif;
            z-index: 1000;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        /* ========== 主内容区域调整 ========== */
        .main-content {
            margin-top: 100px !important;
            /* 增加间距避免被黑条遮挡 */

        }

        /* ========== 原有样式修改 ========== */
        :root {
            --gradient-speed: 30s;
            /* 渐变速度控制 */
            --content-mist: rgba(45, 36, 92, 0.12);
            /* 调整内容区雾化强度 */
            --quartz-intensity: 0.3;
            /* 石英紫强度系数 0-1 */


            /* 空间色域 */
            --cosmic-navy: #0a1a2f;
            /* 星空海军蓝背景 */
            --nebula-core: #223344;
            /* 星云核心色-卡片背景 */

            /* 渐变系统 */
            --stardust-start: rgba(97, 76, 229, 0.8);
            /* 星尘渐变起点 */
            --stardust-end: rgba(54, 46, 163, 0.9);
            /* 星尘渐变终点 */

            /* 文字体系 */
            --radiant-white: rgba(255, 255, 255, 0.95);
            /* 辐射白 */
            --moonlight-silver: rgba(168, 178, 194, 0.9);
            /* 月光银 */
            --pulsar-blue: #6b8cff;
            /* 脉冲星蓝 */

            --bg-deep-space: #0a1929;
            /* 背景：深空蓝 */
            --card-aura-purple: #4a154b;
            /* 主卡牌渐变起始色 */
            --card-blur-cyan: #2a8c82;
            /* 卡牌渐变终止色 */
            --text-primary: rgba(255, 255, 255, 0.88);
            --text-secondary: #a0aec0;
        }

        body {
            background: var(--bg-deep-space) !important;
            /* 必须使用!important覆盖框架 */
            min-height: 100vh;
            /* 确保背景全覆盖 */
            padding: 2rem !important;
            /* 覆盖框架样式 */
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg,
                    rgba(107, 140, 255, 0.08) 0%,
                    rgba(163, 158, 255, 0.05) 50%,
                    rgba(107, 140, 255, 0.08) 100%);
            pointer-events: none;
            z-index: 0;
            animation: ray-scatter 25s linear infinite;
        }

        @keyframes ray-scatter {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 2000px 2000px;
            }
        }

        body::after {
            content: '';
            position: fixed;
            top: -70%;
            left: -70%;
            width: 240%;
            height: 240%;
            background: radial-gradient(circle at 30% 30%,
                    rgba(42, 140, 130, 0.35) 0%,
                    /* 使用卡牌青色 */
                    transparent 50%);
            /* 多重光效叠加 */
            pointer-events: none;
            z-index: -1;
            animation: cosmic-fall 45s linear infinite;
        }

        /* 新增动态效果 */
        @keyframes cosmic-fall {
            0% {
                transform: rotate(0deg) scale(1);
            }

            50% {
                transform: rotate(180deg) scale(1.15);
            }

            100% {
                transform: rotate(360deg) scale(1);
            }
        }

        .mod-title {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

        .mod-title-en {

            color: rgba(255, 248, 242, 0.95) !important;
            /* 象牙白 */
            letter-spacing: -0.02em;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            font-size: 1.25rem;
            font-weight: 700;
            margin-top: 0.8rem;
            /* 标题上方加空隙 */
        }

        .mod-title-zh {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.9) !important;
            /* 月岩灰 */
            opacity: 0.9;
            font-weight: 700;
        }

        .mod-card {
            transition: transform 0.2s;
            opacity: 0;
            /* 初始状态 */
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
            will-change: transform, opacity;
        }

        .mod-card:nth-child(odd) {
            transition-delay: 0.15s;
            /* 奇数卡片延迟 */
        }

        .mod-card:nth-child(even) {
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            /* 交替动效 */
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .mod-card {
                transform: translateY(15px);
                transition-duration: 0.5s;
            }
        }

        .ui.card.mod-card {

            --grad-start: #193B3D;
            /* 深海墨绿 */
            --grad-end: #25626F;
            /* 氧化铜绿 */

            --space-gray-1: #6366f1;
            /* 群青紫 */
            --space-gray-2: #7c3aed;
            /* 电子蓝紫 */
            --space-gray-3: #4f46e5;
            /* 暗夜蓝 */
            --space-gray-4: #3730a3;
            /* 深海蓝 */



            .mod-card:hover .content {
                border-color: rgba(114, 224, 212, 0.25) !important;
                /* 悬停时泛光效果 */
                box-shadow:
                    inset 0 2px 8px rgba(255, 255, 255, 0.15),
                    0 6px 24px -6px rgba(0, 0, 0, 0.2) !important;
            }


            .ui.card.mod-card {
                /* █▓▒░ 新增基础颜色变量 ░▒▓█ */
                --theme-color1: #2c3e50;
                /* 保留默认颜色 */
                --theme-color2: #3498db;
                --theme-border: rgba(52, 152, 219, 0.3);
            }


            border-radius: 18px !important;
            box-shadow: 0 16px 40px -12px rgba(21, 21, 21, 0.12),
            0 4px 16px -4px rgba(0, 0, 0, 0.08),
            inset 0 0 12px rgba(255, 255, 255, 0.3) !important;
            position: relative;
            z-index: 0;
            transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        }






        /* █▓▒░ 十套高辨识度渐变色方案 ░▒▓█ */
        /* 方案1-暗黑科技 */
        .mod-card[data-theme="theme1"] {
            background: linear-gradient(135deg,
                    #1a1a2e 0%,
                    #16213e 40%,
                    #0f3460 100%) !important;
            border-color: rgba(76, 86, 128, 0.4) !important;
        }

        /* 方案2-矿物结晶 */
        .mod-card[data-theme="theme2"] {
            background: linear-gradient(45deg,
                    #2c3e50 0%,
                    #3498db 50%,
                    #2ecc71 100%) !important;
            border-color: rgba(52, 152, 219, 0.3) !important;
        }

        /* 方案3-暮光之城 */
        .mod-card[data-theme="theme3"] {
            background: linear-gradient(to bottom right,
                    #2d3436 0%,
                    #d3d3d3 50%,
                    #2d3436 100%) !important;
            border-color: rgba(211, 211, 211, 0.25) !important;
        }

        /* 方案4-量子蓝调 */
        .mod-card[data-theme="theme4"] {
            background: linear-gradient(225deg,
                    #000428 0%,
                    #004e92 100%) !important;
            border-color: rgba(0, 78, 146, 0.35) !important;
        }

        /* 方案5-熔岩核心 */
        .mod-card[data-theme="theme5"] {
            background: linear-gradient(to top,
                    #7b4397 0%,
                    #dc2430 100%) !important;
            border-color: rgba(220, 36, 48, 0.3) !important;
        }

        /* 方案6-翡翠梦境 */
        .mod-card[data-theme="theme6"] {
            background: linear-gradient(to left,
                    #0ba360 0%,
                    #3cba92 100%) !important;
            border-color: rgba(60, 186, 146, 0.35) !important;
        }

        /* 方案7-机械黎明 */
        .mod-card[data-theme="theme7"] {
            background: linear-gradient(315deg,
                    rgba(47, 61, 94, 0.95) 0%,
                    rgba(80, 110, 173, 0.95) 50%,
                    rgba(146, 231, 255, 0.8) 100%) !important;
            background-blend-mode: normal, multiply;
            border-color: rgba(224, 231, 119, 0.4) !important;
        }

        /* 方案8-星际穿越 */
        .mod-card[data-theme="theme8"] {
            background: linear-gradient(to bottom,
                    #1a1a1a 0%,
                    #4a4a4a 50%,
                    #1a1a1a 100%) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        /* 方案9-幻紫脉冲 */
        .mod-card[data-theme="theme9"] {
            background: linear-gradient(100deg,
                    #654ea3 0%,
                    #3cba92 50%,
                    #eaafc8 100%) !important;
            border-color: rgba(80, 28, 51, 0.25) !important;
        }

        /* 方案10-古铜锈蚀 */
        .mod-card[data-theme="theme10"] {
            background: linear-gradient(to right,
                    #603813 0%,
                    #b29f94 100%) !important;
            border-color: rgba(178, 159, 148, 0.35) !important;
        }

        .ui.card.mod-card::before {
            background: rgba(255, 255, 255, 0.295);
            /* 提高光晕可见度 */
        }

        .ui.card.mod-card::after {
            background: linear-gradient(45deg,
                    rgba(255, 255, 255, 0.2) 0%,
                    rgba(255, 255, 255, 0) 30%,
                    rgba(255, 255, 255, 0) 70%,
                    rgba(255, 255, 255, 0.15) 100%);
            /* 增强光带 */
        }

        .ui.card.mod-card .content {
            background: linear-gradient(to bottom right,
                    #2c3e50 0%
                    /* 微光基底 */
                    #3498db 50%
                    /* 星云紫雾 */
                ) !important;


            border: 1px solid rgba(163, 158, 255, 0.08) !important;
            box-shadow:
                inset 0 1px 4px rgba(255, 255, 255, 0.1),
                0 4px 16px -4px rgba(0, 0, 0, 0.3) !important;
            color: var(--moonlight-silver);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            backdrop-filter: blur(20px) saturate(180%);
            /* 工业级模糊 */
        }



        /* 下载计数器暗色适配 */
        .download-count {
            position: absolute;
            top: 50px;
            /* 在作者下方 */
            right: 20px;
            color: rgba(220, 215, 255, 0.9) !important;
            /* 柔光银 */
            padding: 4px 12px !important;
            border-radius: 16px !important;
            backdrop-filter: blur(4px);
        }




        .mod-card:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow:
                0 24px 60px -16px rgba(0, 0, 0, 0.18),
                0 8px 24px -6px rgba(0, 0, 0, 0.12),
                inset 0 0 16px rgba(255, 255, 255, 0.4) !important;
        }


        /* 添加动态光效追踪 */
        @media (hover: hover) {
            .mod-card:hover::before {
                content: '';
                position: absolute;
                top: var(--y);
                left: var(--x);
                width: 200px;
                height: 200px;
                background: radial-gradient(circle closest-side,
                        rgba(255, 255, 255, 0.25),
                        transparent);
                transform: translate(-50%, -50%);
                pointer-events: none;
            }
        }

        /* 3D亮边强化 */
        .ui.card.mod-card:hover::after {
            background: linear-gradient(45deg,
                    rgba(255, 255, 255, 0.8) 0%,
                    rgba(255, 255, 255, 0) 30%,
                    rgba(255, 255, 255, 0) 70%,
                    rgba(255, 255, 255, 0.6) 100%);
            opacity: 0.8;
        }


        .download-count::after {
            content: "次下载";
            font-size: 1em;
            margin-left: 0.3em;
        }

        .description-zh {
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            font-weight: 700;
            color: #5aeb9b !important;
            /* 白色（示例） */
            margin-right: 120px !important;
            /* 留出右边空间 */
            max-width: calc(100% - 140px);
            /* 防止内容溢出 */
            padding-left: 1rem !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            transparent 90%;
            font-size: 1.3em;

            border-left-color: var(--pulsar-blue) !important;
            padding-left: 0.5rem;
            position: relative;
            transition: border-color 0.3s;
        }

        .description-zh:hover {
            color: red;
            /* 鼠标悬停时字体变红 */
        }

        /* ========== URL样式 ========== */
        .mod-url {
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(123, 97, 255, 0.08) 50%,
                    transparent 100%) !important;
            border-top: 2px solid rgba(114, 224, 212, 0.1) !important;
            padding: 0.8rem 1.2rem !important;
        }

        .mod-url::after {
            content: "点击进入";
            font-size: 1.0rem;
            color: #f5aa0a;
            margin-left: 0.5rem;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .mod-url:hover::after {
            opacity: 1;
        }

        .url-text {
            color: rgba(185, 230, 255, 0.9) !important;
            position: relative;
            display: inline-block;
            padding-right: 24px;
        }

        .url-text:hover {
            color: #d95f8c !important;
            /* 樱花粉 */
            text-decoration: underline;
        }

        .url-text::before {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            width: 16px;
            height: 16px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237B61FF' d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
            transform: translateY(-50%);
            opacity: 0.6;
            transition: opacity 0.2s;
        }

        .url-text:hover::before {
            opacity: 1;
            animation: urlPulse 1.2s infinite;
        }


        @keyframes urlPulse {
            0% {
                transform: translateY(-50%) scale(1);
            }

            50% {
                transform: translateY(-50%) scale(1.1);
            }

            100% {
                transform: translateY(-50%) scale(1);
            }
        }


        .url-text::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 0;
            height: 1px;
            background: currentColor;
            transition: width 0.3s ease-out;
        }

        .url-text:hover::after {
            width: 100%;
        }


        /* ========== 响应式设计 ========== */
        @media (max-width: 768px) {



            .ui.card.mod-card .content {
                border: 1px solid rgba(163, 158, 255, 0.08) !important;
                box-shadow:
                    inset 0 1px 4px rgba(255, 255, 255, 0.1),
                    0 4px 16px -4px rgba(0, 0, 0, 0.3) !important;

            }

            .top-banner {
                padding: 0.8rem 0;
                font-size: 1.2rem;
                letter-spacing: 1px;
            }

            .main-content {
                margin-top: 80px !important;
            }

            .url-text {
                font-size: 1.2em !important;
            }
        }

        #refreshBtn {
            margin-left: 1.52rem;
        }
    </style>
</head>

<body>

    <div class="meta">
        <span class="download-count">${mod.downloads || 0}</span>
        ${mod.author ? `<span class="author-tag">作者：${mod.author}</span>` : ''}
    </div>

    <div class="top-banner">
        MINECRAFT MODPACK MANAGEMENT
    </div> <!-- 修复未闭合的div -->
    <div class="ui container">
        <h1 class="ui header">
            热门整合包（当前）
        </h1>

        <div id="loading" class="ui active inverted dimmer">
            <div class="ui text loader">I've been fly too fast too little close to the sun...</div>
        </div>

        <div id="modContainer" class="ui two stackable cards"></div>

        <div id="errorMessage" class="ui negative message hidden">
            <i class="close icon"></i>
            <div class="header"></div>
            <p></p>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.5.0/semantic.min.js"></script>
    <script>
        /* 在JS初始化部分添加光标追踪 */
        document.querySelectorAll('.mod-card').forEach(card => {
            card.addEventListener('mousemove', (e) => {
                const rect = card.getBoundingClientRect();
                card.style.setProperty('--x', `${e.clientX - rect.left}px`);
                card.style.setProperty('--y', `${e.clientY - rect.top}px`);
            });
        });
        // 根据时间自动调整背景深度
        function updateBackground() {
            const hour = new Date().getHours();
            const intensity = Math.abs(12 - hour) / 12;
            document.documentElement.style.setProperty(
                '--bg-deep-space',
                `hsl(210, 60%, ${15 + intensity * 10}%)`
            );
        }
        setInterval(updateBackground, 3600000);

        // 状态管理对象
        const ModManager = {
            init() {
                this.bindEvents()
                this.loadMods()
            },

            bindEvents() {
                $('#refreshBtn').click(() => this.loadMods())
                $('.message .close').click(() => {
                    $('#errorMessage').addClass('hidden')
                })
            },

            showLoading() {
                $('#loading').addClass('active')
            },

            hideLoading() {
                $('#loading').removeClass('active')
            },

            showError(msg) {
                $('#errorMessage').removeClass('hidden').find('.header').text('发生错误！')
                $('#errorMessage p').html(msg)
            },

            renderMods(mods) {
                const container = $('#modContainer').empty()

                if (mods.length === 0) {
                    this.showError('没有找到模组数据，请先运行爬虫脚本')
                    return
                }

                mods.forEach(mod => {
                    const card = `
                            <div class="ui card mod-card" data-theme="theme7">
                                <div class="content">
                                    <div class="author-corner">作者：${mod.author}</div>


                                    <div class="mod-title-en">${mod.name_en || 'Untitled Mod'}</div>
                                    <div class="mod-title-zh">${mod.name_zh || '未知模组'}</div>
                                    <div class="meta">
                                        <span class="download-count">${mod.downloads || 0}</span>
                                    </div>
                                <div class="description">

    <p class="description-zh">${mod.description_zh || '暂无中文描述'}</p>
                                <!-- 新增URL显示部分 -->
    ${mod.url ? `
        <div class="mod-url">
        <i class="linkify icon"></i>
        <a href="${mod.url}" target="_blank" class="url-text">
            ${mod.url.replace(/^https?:\/\//, '')}
        </a>
        </div>
    ` : ''}
                                </div>

                                </div>
                            </div>
                        `
                    container.append(card)
                })
            },

            async loadMods() {
                try {
                    this.showLoading()
                    const response = await fetch('/api/mods')

                    if (!response.ok) {
                        throw `API错误 (状态码 ${response.status})`
                    }

                    const data = await response.json()
                    this.renderMods(data.data || [])
                } catch (err) {
                    console.error('加载失败:', err)
                    this.showError(`无法加载数据：${err}<br>请检查后台服务器是否运行`)
                } finally {
                    this.hideLoading()
                }
            }
        }

        // 初始化
        $(document).ready(() => ModManager.init())

        ModManager.init = function () {
            this.bindEvents();
            this.loadMods();
            this.setupScrollEffect(); // 新增初始化
        }

        // 新增视差观察器
        ModManager.setupScrollEffect = function () { }
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const card = entry.target;
                    const delay = Math.abs(entry.boundingClientRect.top) * 0.1;
                    card.style.transition = `all 0.6s cubic-bezier(0.25,0.46,0.45,0.94) ${delay}ms`;
                    card.style.opacity = 1;
                    card.style.transform = 'translateY(0)';
                }
            });
        }, {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        });

        // 在renderMods函数末尾添加
        setTimeout(() => {
            document.querySelectorAll('.mod-card').forEach(card => {
                card.style.opacity = 0;
                card.style.transform = 'translateY(20px)';
                observer.observe(card);
            });
        }, 100);



    </script>
</body>

</html>